<template>
    <div>
        <el-collapse model-value="1" class="collapase-main">
            <el-collapse-item :title="title" name="1" class="collapsebg">
                      <template #title>
                            <span style="display: flex; align-items: center;">
                            <img src="@/assets/imgs/he.png" alt="" style="height:20px;width:20px;">
                            <span style="margin-left: 1px;">{{ title }}</span>
                            </span>
                        </template>
                <ul v-if="dataList.length > 0">
                    <li v-for="item in dataList" :key="item['id']">
                        <el-tooltip
                            style="width: 100%;display: flex;height: 32px;align-items: center;"
                            effect="light"
                            placement="left"
                            :content="item['name'] +'('+ item['value'] + ')'"
                        >
                          {{ item['name'] +'('+ item['value'] + ')' }}
                        </el-tooltip>
                    </li>
                </ul>
                <div v-else class="nodata">
                    暂无数据
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue'
const props = defineProps({
    title: {
        type: String,
		default: ''
    },
    dataList: {
        type: Array as PropType<any[]>,
		default: () => []
    }
})

const emit = defineEmits(['checked'])

interface obj {
    name: String,
    id: Number | string,
    number: Number,
    checked: Boolean
}
const checkedList = ref([])

const handleChangeFirst = (val: obj) => {
    if (!Array.isArray(checkedList.value)) return;
    if(!val.checked) {
        let index = checkedList.value.findIndex((item) => item["id"] === val.id);
        if (index !== -1) {
            checkedList.value.splice(index, 1);
        }
    } else {
        checkedList.value.push(val);
    }
    emit('checked', checkedList.value)
}
</script>
<style lang="scss" scoped>
.nodata {
    text-align: center;
    padding-top: 1.3rem;
    cursor: pointer;
    color: #a8abb2;
}

.collapase-main {
    margin-bottom: 5px;
}

.collapsebg ul {
    // box-shadow: 0 2px 3px #d2d2d2bf;
    // border: 1px solid #ebebeb;
}

.collapsebg ul li {
    padding-left: 1.7rem !important;
    line-height: 30px;
    font-size: 14px;
    color: #4e5969;
}

.collapsebg ul li:hover {
    cursor: pointer;
    background-color: #f6f6f6;
}
</style>
<style lang="scss">
// 两个组件共有的css
.collapsebg .el-collapse-item__wrap {
    border-bottom: none;
}

.collapsebg .el-collapse-item__header {

    color: #333 !important;
    padding-left: 1.7rem !important;
    font-weight: 500 !important;
    padding-bottom: 0px;
    border: none !important;
}

.el-collapse {
    border: none !important;
}
</style>